import React,{ Fragment,useState,useEffect,useMemo } from 'react';

function Example(){
    const [ xiaohong, setXiaohong ] = useState("工作中")
    const [ xiaoming, setXiaoming ] = useState("工作中")

    return (<Fragment>
        <button onClick={()=>{ setXiaohong(new Date().getTime() + "小红工作中" ) }}>小红，{ xiaohong }</button> <br/><hr/>
        <button onClick={()=>{ setXiaoming(new Date().getTime() + "小明为您服务" ) }}>小明，{ xiaoming }</button>
        <hr />
        <Components name={xiaohong}>{xiaoming}</Components>
    </Fragment>)
}

function Components({name,children}){
    function getXiaohong(name){
        console.log("getXiaohong"+name)
        return name + "改变了，更新了"
    }
    useEffect(()=>{
        console.log("useEffect")
    },[name])
    // const actionXiaohong = getXiaohong(name)
    const actionXiaohong = useMemo(()=>{
        return getXiaohong(name)
    },[name])
    return (<div>
        <p>{actionXiaohong}</p>
        <p>{children}</p>
    </div>)
}

export  default Example